<template>
	<view class="container">
		<view class="page_container">
			<!-- 页面顶部背景渐变颜色 -->
			<view class="header_bg"></view>
			<view class="varHeight"></view>
			<!-- 顶部title -->
			<view class="top_nav">
				<view class="manger" v-if="settingFlag" @click="settingCar">管理</view>
				<view class="manger" v-if="!settingFlag" @click="settingCar">完成</view>
				<view class="shop_title">购物车</view>
			</view>
			<!-- vip权益 -->
			<view class="vip" v-if="showAdvertising" @click="closeAdvertising">
				<image class="vip_icon" src="https://community.chuangxiangdianli.com/images/shopCar/car_vip.png" mode=""></image>
				<view class="vip_msg">首单购买成功可直升黄金会员，解锁更多权益</view>
				<image class="vip_close" src="https://community.chuangxiangdianli.com/images/shopCar/close.png" mode=""></image>
			</view>
			<view v-if="!showAdvertising" class="activeMt"></view>
			<!-- 购物车商品 -->
			<!-- <view v-if="JSON.stringify(shopcarData) == '[]'" class="p30">购物车为空</view> -->
			<view class="goods">
				<!-- 缺省页 -->
				<view class="qxy" v-if="showflag">
					<Default
						:type='type'
						:showflag='showflag'
					 />
				</view>
				
				<!-- 缺省页 -->
				<!-- 顶部    店铺名称 -->
				<view v-if="JSON.stringify(shopcarData) != '[]'" v-for="(item, index) in shopcarData" :key='index'>
					<view class="store">
						<view class="check">
							<image v-if="item.checked" @tap="check(2, 'clear_all', item.store_id)" src="https://community.chuangxiangdianli.com/images/shopCar/choose_s.png" mode=""></image>
							<image v-if="!item.checked" @tap="check(2, 'checked_all', item.store_id)" src="https://community.chuangxiangdianli.com/images/shopCar/choose_n.png" mode=""></image>
						</view>
						<view class="active" @click="goStore(item.store_id)">
							<image class="store_icon" :src="item.store_logo" mode=""></image>
							<view class="activeName">{{ item.store_name }}</view>
							<image class="jiantou" src="https://community.chuangxiangdianli.com/images/shopCar/store_jiantou.png" mode=""></image>
						</view>
						<view class="freeShip" v-if="false">免运费</view>
					</view>
					<!-- 活动信息 -->
					<view class="activeMsg">
						<view class="zhekou" v-if="false">
							<view class="manzhe">满折</view>
							<view class="zhekou_msg">已满2件，已减78.78</view>
							<view class="active_check">查看活动</view>
						</view>
						<!-- <view class="qianggou">
							<text>抢购中</text>
							<text>抢购结束时间</text>
							<text>10月20日 00：00</text>
						</view> -->
					</view>
					<!-- 商品 -->
					<view class="good" v-for="(v, n) in item.cart_list">
						<view class="isCheck">
							<image v-if="v.checked" @tap="check(1, 'clear_all', v.cart_id)" src="https://community.chuangxiangdianli.com/images/shopCar/choose_s.png" mode=""></image>
							<image v-if="!v.checked" @tap="check(1, 'checked_all', v.cart_id)" src="https://community.chuangxiangdianli.com/images/shopCar/choose_n.png" mode=""></image>
						</view>
						<view class="goods_pic">
							<image @click="goDetail(v.goods_id)" :src="v.goods_image" mode=""></image>
						</view>
						<view class="goods_msg">
							<view class="goods_name">{{ v.goods_name }}</view>
							<view class="goods_spec">
								<view>
									<text v-if="!v.sku_name || v.sku_name != '-'">{{ v.sku_name }}</text>
									<text v-else>单规格商品</text>
									<image v-if="false" src="https://community.chuangxiangdianli.com/images/shopCar/car_down.png" mode=""></image>
								</view>
							</view>
							<view class="goods_price">
								<view class="price">￥<text>{{v.goods_price}}</text></view>
								<view class="num">
									<view @click="changeNum(v.cart_id, 0)">-</view>
									<view>{{ v.buy_num }}</view>
									<view @click="changeNum(v.cart_id, 1)">+</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				
				
			</view>
			<!-- 推荐商品,猜你喜欢 -->
			<view class="maybeLike">
				<view></view>
				<image src="https://community.chuangxiangdianli.com/images/shopCar/like.png" mode=""></image>
				<text>猜你喜欢</text>
				<view></view>
			</view>
			<!-- 推荐商品列表 -->
			<view class="tjgoods">
				<waterfallFlow
					:leftData='leftData'
					:rightData='rightData'
				 />
			</view>
			<!--  底部结算 -->
			<view class="jiesuan">
				<!--  全选 -->
				<view class="allCheck" @click="check(3, 'str', 0)">
					<image v-if="!allCheck" src="https://community.chuangxiangdianli.com/images/shopCar/choose_n.png" mode=""></image>
					<image v-if="allCheck" src="https://community.chuangxiangdianli.com/images/shopCar/choose_s.png" mode=""></image>
					全选
				</view>
				<!-- 总计价格 -->
				<view class="orderPrice" v-if="settingFlag">
					<view class="zj">总计 <text style="color: #F55519;">￥{{ total_price }}</text></view>
					<view class="yh">已优惠 <text style="color: #272222;">￥{{ coupon_money }}</text></view>
				</view>
				<view class="goJs" v-if="settingFlag" @click="goJs">
					<view>去结算</view>
				</view>
				<view class="goJs1" v-if="!settingFlag" @click="delCar">
					<view>删除</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import waterfallFlow from '../../components/waterfallFlow/waterfallFlow.vue'
	import Default from '../../components/default/default.vue'
	export default{
		components: {
			waterfallFlow,
			Default
		},
		data() {
			return{
				showflag: false, // 缺省页标志
				type: 3, // 缺省页标识
				settingFlag: true, // 删除、清空购物车标志
				goodsData: [], // 推荐商品数据
				showAdvertising: false, // 广告位   关闭
				demo: '111111111',
				shopcarData: [], // 购物车列表数据
				total_price: 0, // 总价
				coupon_money: 0, // 优惠价格
				allCheck: true,
				leftData: [],
				rightData: [],
			}
		},
		onShow() {
			this.getShopCarList()
			this.getGoodsData()
		},
		methods: {
			//  点击去结算
			goJs() {
				var that = this
				let arr = []
				this.shopcarData.map(item => {
					item.cart_list.map(v => {
						if (v.checked) {
							let obj = {}
							obj.goods_id = v.goods_id
							obj.buy_num = v.buy_num
							obj.sku_id = v.sku_id
							obj.ifcart = true
							obj.cart_id = v.cart_id
							arr.push(obj)
						}
					})
				})
				console.log('打印arr,', arr)
				if (arr.length == 0) {
					uni.showToast({
						title: '请选择商品！',
						icon: 'none'
					})
					return
				}
				arr = JSON.stringify(arr)
				uni.navigateTo({
					url: '/other/settlement/index?arr=' + arr
				})
				
			},
			// 购物车商品删除
			delCar() {
				var that = this
				let str = ''
				this.shopcarData.map(item => {
					item.cart_list.map(v => {
						if (v.checked) {
							str += v.cart_id + ','
						}
					})
				})
				str = str.substring(0, str.length - 1)
				// console.log("str1", str)
				that.$mrequest({
					url: 'Mini/cart/delCart',
					method: 'POST',
					data: {
						ids: str
					},
					callBack: function callBack (res) {
						console.log(res)
						if (res.status) {
							that.getShopCarList()
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					},
					fail: function fail (res) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			// 判断是否全选
			isAllcheck() {
				var that = this
				that.allCheck = that.shopcarData.every(item => item.checked == true)
			},
			//  修改状态
			settingCar() {
				this.settingFlag = !this.settingFlag
			},
			//  商品选中或取消
			check(num, str, id) {
				var that = this
				let data = {}
				if (num == 1) {
					data.cart_id = id
					data.is_action = str
				} else if (num == 2) {
					data.store_id = id
					data.is_action = str
				} else if (num == 3) {
					if(that.allCheck){
						data.is_action = 'clear_all'
					} else {
						data.is_action = 'checked_all'
					}
				}
				// 商品选中/取消选中
				// item.checked = !item.checked
				// // 判断店铺是否选中
				// // let store = true
				// this.shopcarData[index].checked = this.shopcarData[index].cart_list.every(v => v.checked == true)
				this.$mrequest({
					url: 'Mini/cart/cartChecked',
					method: 'POST',
					data: data,
					callBack: function callBack (res) {
						if (res.status) {
							that.getShopCarList()
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					},
					fail: function fail (res) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			//  获取购物车商品列表
			getShopCarList() {
				var that = this
				this.$http.post({
					url: 'Mini/cart/getCartList',
					data: {
						token: uni.getStorageSync("userInfo").token
					}
				}).then(res => {
					if (res.status) {
						that.shopcarData = res.data.data
						if(res.data.data.length == 0){
							that.showflag = true
						} else {
							that.showflag = false
						}
						that.total_price = res.data.total_price
						that.coupon_money = res.data.coupon_money
						that.isAllcheck()
						console.log('购物车数据', that.shopcarData)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				})
			},
			// 关闭广告推荐
			closeAdvertising() {
				console.log('关闭了')
				this.showAdvertising = false
			},
			//  跳转商品详情
			goDetail(id) {
				// console.log('执行goDetail方法', id)
				uni.navigateTo({
					url: '/other/goodsDetail/index?goods_id=' + id
				})
			},
			//  获取推荐商品数据
			// 获取商品数据
			getGoodsData() {
				var that = this
				this.$http.post({
					url: 'Mini/goods/goodsList',
					data: {
						is_master: 1
					}
				}).then(res => {
					// console.log('首页数据', res)
					if (res.status) {
						this.goodsData = res.data.data
						var left = []
						var leftHeight = 0
						var right = []
						var rightHeight = 1
						that.goodsData.map((item, index) => {
							if (leftHeight < rightHeight) {
								if (item.full_reductions.length > 0) {
									leftHeight += 260
								} else {
									leftHeight += 234
								}
								left.push(item)
							} else {
								if (item.full_reductions.length > 0) {
									rightHeight += 260
								} else {
									rightHeight += 234
								}
								right.push(item)
							}
						})
						that.leftData = left
						that.rightData = right
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				})
			},
			//  购物车商品数量加（1）减（0）
			changeNum(id, type) {
				var that = this
				this.$http.post({
					url: 'Mini/cart/editCart',
					data: {
						cart_id: id,
						is_type: type
					}
				}).then(res => {
					if (res.status) {
						that.getShopCarList()
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				})
			},
			//  跳转店铺
			goStore(id) {
				uni.navigateTo({
					url: `/other/store/index?id=${id}`
				})
			},
			
		},
		
	}
</script>

<style lang="scss" scoped>
	.container{
		position: relative;
		background-color: #EDEDED;
	}
	.page_container{
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		padding-bottom: 110rpx;
		background-color: #EDEDED;
	}
	.varHeight{
		background: #34C39E;
	}
	.header_bg{
		position: fixed;
		left: 0;
		top: calc(91rpx + var(--status-bar-height));
		height: 455rpx;
		width: 100%;
		padding-top: var(--status-bar-height);
		box-sizing: border-box;
		background: linear-gradient(#34C39E, #FFFFFF);
		z-index: -1;
	}
	.top_nav{
		position: fixed;
		left: 0;
		top: var(--status-bar-height);
		height: 91rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #34C39E;
		z-index: 99;
		.manger{
			position: absolute;
			left: 35rpx;
			top: 0;
			bottom: 0;
			margin: 35rpx auto 0;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
		}
		.shop_title{
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
		}
	}
	.activeMt{
		width: 100%;
		height: calc(100rpx + var(--status-bar-height));
	}
	.vip{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		margin: 0rpx 30rpx 0;
		margin-top: calc(100rpx + var(--status-bar-height));
		height: 72rpx;
		border-radius: 36rpx;
		background-color: #fff;
		padding: 0 44rpx 0 22rpx;
		z-index: 10;
		.vip_icon{
			display: block;
			height: 40rpx;
			width: 40rpx;
		}
		.vip_msg{
			flex: 1;
			font-size: 22rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #FF8D34;
			margin-left: 12rpx;
		}
		.vip_close{
			display: block;
			width: 20rpx;
			 height: 20rpx;
		}
	}
	.goods{
		overflow: hidden;
		margin: 45rpx 25rpx 0;
		padding: 34rpx 20rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 20rpx;
		z-index: 90;
		.qxy{
			height: 500rpx;
			width: 100%;
		}
		.store{
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			height: 28rpx;
			.check{
				height: 28rpx;
				width: 28rpx;
				&>image{
					display: block;
					height: 28rpx;
					width: 28rpx;
				}
			}
			.active{
				flex: 1;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				height: 28rpx;
				margin-left: 21rpx;
				.store_icon{
					display: block;
					height: 26rpx;
					width: 26rpx;
					margin-right: 14rpx;
				}
				.activeName{
					font-size: 26rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #393939;
					margin-right: 8rpx;
				}
				.jiantou{
					display: block;
					height: 21rpx;
					width: 21rpx;
				}
			}
			.freeShip{
				font-size: 22rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #B8B8B8;
			}
		}
		.activeMsg{
			width: 100%;
			margin-top: 34rpx;
			padding-left: 46rpx;
			box-sizing: border-box;
			.zhekou{
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				height: 34rpx;
				.manzhe{
					width: 65rpx;
					height: 34rpx;
					background: linear-gradient(90deg, #FF3225, #F55519);
					border-radius: 6rpx;
					text-align: center;
					font-size: 20rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #FFFFFF;
				}
				.zhekou_msg{
					flex: 1;
					font-size: 22rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #040303;
					margin-left: 10rpx;
				}
				.active_check{
					font-size: 22rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #838383;
					margin-right: 21rpx;
				}
			}
			.qianggou{
				margin-top: 23rpx;
				font-size: 22rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #676767;
				&>text:nth-child(1){
					font-weight: 700;
					color: #040303;
				}
				&>text:nth-child(2){
					margin: 0 14rpx;
				}
			}
		}
		.good{
			display: flex;
			justify-content: flex-start;
			flex-direction: row;
			align-items: center;
			margin: 24rpx 0;
			.isCheck{
				width: 28rpx;
				height: 28rpx;
				&>image{
					display: block;
					height: 28rpx;
					width: 28rpx;
				}
			}
			.goods_pic{
				width: 180rpx;
				height: 180rpx;
				margin: 0 22rpx;
				&>image{
					display: block;
					width: 180rpx;
					height: 180rpx;
				}
			}
			.goods_msg{
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				height: 180rpx;
				.goods_name{
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #676767;
				}
				.goods_spec{
					flex: 1;
					margin-top: 16rpx;
					&>view{
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;
						height: 46rpx;
						width: 100%;
						background-color: #F7F8F8;
						border-radius: 8rpx;
						font-size: 22rpx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						color: #A6A6A6;
						padding: 0 19rpx;
						box-sizing: border-box;
						&>image{
							display: block;
							width: 17rpx;
							height: 17rpx;
						}
					}
				}
				.goods_price{
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					height: 33rpx;
					.price{
						font-size: 18rpx;
						font-family: Source Han Sans CN;
						font-weight: bold;
						color: #F55519;
						&>text{
							font-size: 24rpx;
						}
					}
					.num{
						display: flex;
						flex-direction: row;
						align-items: center;
						height: 33rpx;
						text-align: center;
						&>view{
							width: 43rpx;
							height: 33rpx;
							font-size: 18rpx;
							font-family: Source Han Sans CN;
							font-weight: 500;
							color: #393939;
						}
						&>view:nth-child(2){
							width: 54rpx;
							height: 33rpx;
							background-color: #F7F8F8;
							
							
						}
					}
				}
			}
		}
	}
	.jiesuan{
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height:105rpx;
		border-bottom: 2rpx solid #F2F3F5;
		background-color: #FFFFFF;
		z-index: 99;
		.allCheck{
			display: flex;
			flex-direction: row;
			align-items: center;
			line-height: 103rpx;
			font-size: 22rpx;
			margin-right: 23rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #372E2E;
			&>image{
				display: block;
				height: 28rpx;
				width: 28rpx;
				margin: 0 17rpx 0 37rpx;
			}
		}
		.orderPrice{
			flex: 1;
			font-size: 22rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #7E7E7E;
		}
		.goJs{
			display: flex;
			flex-direction: row;
			align-items: center;
			height: 62rpx;
			padding: 0 22rpx 0 22rpx;
			box-sizing: border-box;
			background: linear-gradient(-74deg, #70DAC4, #3EC4A7);
			border-radius: 31rpx;
			margin-right: 31rpx;
			font-size: 26rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #FFFFFF;
			&>view:nth-child(2){
				height: 40rpx;
				width: 40rpx;
				border-radius: 20rpx;
				background-color: #fff;
				color: #3EC4A7;
				text-align: center;
				margin-left: 13rpx;
			}
		}
		.goJs1{
			height: 62rpx;
			line-height: 62rpx;
			padding: 0 22rpx 0 22rpx;
			box-sizing: border-box;
			background: linear-gradient(-74deg, #70DAC4, #3EC4A7);
			border-radius: 31rpx;
			margin-right: 31rpx;
			font-size: 26rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
	.maybeLike{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		height: 51rpx;
		margin: 40rpx 0;
		&>view{
			width: 96rpx;
			height: 1rpx;
			margin-top: 13rpx;
			background-color: #B5B5B5;
		}
		&>text{
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #372E2E;
			margin-right: 40rpx;
		}
		&>image{
			display: block;
			height: 51rpx;
			width: 64rpx;
			margin-left: 40rpx;
			margin-right: 29rpx;
		}
	}
	.tjgoods{
		padding: 0 15rpx;
	}
</style>
